<template>
  <div class="wechat-container">
    <div class="wechat-title">村、社区</div>
    <div class="wechat-carousel">
      <carousel autoplay>
        <div class="carousel-item" v-for="item in bannerList" :key="item">
          <img :src="item" alt="">
        </div>
      </carousel>
    </div>

    <div class="wechat-content flex gap-1 ">
      <div class="flex-2 flex flex-item gap-1" v-for="item in dataList" :key="item.id" @click="handleClick(item)">
        <div class="item-icon">
          <img :src="item.icon" alt="">
        </div>
        <div class="item-text">{{item.CategoryName}}</div>
      </div>

    </div>
  </div>
</template>
<script>
import Carousel from 'ant-design-vue/es/carousel'
import { getCategoryList } from '@/api/category'

import icon0 from '../../assets/icons/village-0.png'
import icon1 from '../../assets/icons/village-1.png'
import icon2 from '../../assets/icons/village-2.png'
import icon3 from '../../assets/icons/village-3.png'
import icon4 from '../../assets/icons/village-4.png'
import icon5 from '../../assets/icons/village-5.png'
import icon6 from '../../assets/icons/village-6.png'
import icon7 from '../../assets/icons/village-7.png'
import icon8 from '../../assets/icons/village-8.png'
import banner0 from '../../assets/icons/banner0.png'
import banner1 from '../../assets/icons/banner1.png'
import banner2 from '../../assets/icons/banner2.png'
export default {
  components: {
    Carousel
  },
  data () {
    return {
      iconList: [icon0, icon1, icon2, icon3, icon4, icon5, icon6, icon7, icon8, icon8],
      bannerList: [banner0, banner1, banner2],
      dataList: []
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    async init () {
      const { data } = await getCategoryList({ parentID: 15, pageSize: 100 })

      this.dataList = data && data.length > 0 ? data.map((el, idx) => {
        return {
          ...el,
          icon: el.ImageUrl
          //icon: this.iconList[idx]
        }
      }) : []
    },
    handleClick (row) {
      if (row.CategoryType == 1) {
        this.$router.push({ name: 'policyDetails',query:{id: row.id,name: row.CategoryName} })
      } else if (row.CategoryType == 2) {
        window.open(row.LinkUrl)
      } else {
        this.$router.push({
          name: 'contentDetails', query: {
            id: row.id,
            type: 1
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import './wechat.less';
</style>
